import {
  CalendarOutlined,
  FlagFilled,
  BellFilled,
  BulbFilled,
  MailOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import {  Menu, Switch } from 'antd';
import React, { useState } from 'react';
import {Link} from 'react-router-dom'

function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

const items = [
  getItem(<Link to='/system/commodity'>商品管理</Link>, '1', <FlagFilled />),
  // getItem('商品管理', '1', <FlagFilled />,[
  //   getItem(<Link to='/system/commodity'>商品管理</Link>, null, null),
  //   getItem(<Link to=''>配置项管理</Link>, null, null)
  // ]),
  getItem(<Link to='/system/shop'>门店管理</Link>, '2',<BulbFilled />),
  getItem(<Link to='/system/order'>订单管理</Link>, '3',<BellFilled /> ),
  getItem(<Link to='/system/user'>用户管理</Link>, '4',<BellFilled /> ),
  getItem(<Link to='/system/coupon'>优惠券管理</Link>, '5',<BellFilled /> ),
  getItem(<Link to='/system/total'>统计图</Link>, '6',<BellFilled /> )
];

const App = () => {
  const [mode, setMode] = useState('inline');
  const [theme, setTheme] = useState('light');

  const changeMode = (value) => {
    setMode(value ? 'vertical' : 'inline');
  };

  const changeTheme = (value) => {
    setTheme(value ? 'dark' : 'light');
  };

  return (
    <>
      {/* <br /> */}
      <Menu
        style={{
          width: 256,
        }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode={mode}
        theme={theme}
        items={items}
      />
    </>
  );
};

export default App;